<template>
  <div class="components-panel">
    <div class="panel-title flex p_10 justify_between fontsize_14">
      <template v-if="designLibShow">
        <span>全部组件</span>
        <span class="iconfont icon-left cursor_point" @click="handleCloseLib"></span>
      </template>
      <template v-else>
        <span>组件</span>
      </template>
    </div>
    <lib-tabs></lib-tabs>
  </div>
</template>

<script>
import { computed, defineAsyncComponent, defineComponent } from "vue";
import { useDesignStore } from "../../../../store/design";

const LibTabs = defineAsyncComponent(() => import("./lib-tabs.vue"));
export default defineComponent({
  name: "design-lib",
  components: {
    LibTabs,
  },
  setup() {
    const designStore = useDesignStore();
    const designLibShow = computed(() => designStore.designLibShow);
    const handleCloseLib = () => {
      designStore.closeDesignLibShow();
    };
    return {
      designLibShow,
      handleCloseLib,
    };
  },
});
</script>

<style lang="less" scoped>
@import url("./index.less");

.panel-content {
  :deep(.el-tabs__item) {
    height: 60px;
    line-height: 60px;
  }

  :deep(.el-tabs__item.is-active) {
    background-color: #14161a;
  }

  :deep(.el-tabs__nav-wrap.is-left::after) {
    width: 0;
  }

  :deep(.el-tabs__header.is-left) {
    margin-right: 2px;
  }
}
</style>
